<template>
  <!-- 底部 -->
  <!-- <footer class="hd-footer" :style="styles">
    <p class="footerLinks">
      <a class="footerLink">{{name}}</a>
    </p>
    <p>
       {{copyright}}
    </p>
  </footer> -->
  
  <div style="position:fixed;bottom:0;left:0;height:1rem;border-top:1px solid #AAAAAA;width:100%;background-color:#fff;z-index:999;padding-top:1%">
    <router-link :to="{path:'appIndex'}">
      <div style="text-align:center;width:20%;float:left;">
        <hd-svg-icon name="hd-fangzi-copy" size="30px" color="#AAAAAA" ></hd-svg-icon>
        <p>
          首页
        </p>
      </div>
    </router-link>
    <router-link :to="{path:'redlist'}">
      <div style="text-align:center;width:20%;float:left;">
        <hd-svg-icon name="hd-gonglve" size="30px" color="#AAAAAA" ></hd-svg-icon>
        <p>
          攻略
        </p>
      </div>
    </router-link>
    <router-link :to="{path:'boutiquelineindex'}">
      <div style="text-align:center;width:20%;float:left">
        <hd-svg-icon name="hd-xianlu" size="30px" color="#AAAAAA" ></hd-svg-icon>
        <p>
          精品线路
        </p>
      </div>
    </router-link>
    <router-link :to="{path:'travelnoteslist'}">
      <div style="text-align:center;width:20%;float:left">
        <hd-svg-icon name="hd-youji2" size="30px" color="#AAAAAA" ></hd-svg-icon>
        <p>
          热门游记
        </p>
      </div>
    </router-link>
    <router-link :to="{path:'centerindex'}">
      <div style="text-align:center;width:20%;float:left">
        <hd-svg-icon name="hd-wode2" size="30px" color="#AAAAAA" ></hd-svg-icon>
        <p>
          我的
        </p>
      </div>
    </router-link>
  </div>
</template>

<script>
// import hd-svg-icon from '../../hdsvgicon/src/hd-svg-icon.vue';
export default {
  name: 'hd-footer',
  data () {
    return {}
  },
  props: {
    name: String,
    copyright: String,
    height: {
      validator(value) {
        return /^(\.|\d+\.)?\d+(px|rem)$/.test(value)
      },
      default: '1.6rem'
    }
  },
  computed: {
    styles() {
      const style = {}
      if (this.height) {
        style.height = this.height;
      }
      return style
    }
  }
}
</script>

<style lang="stylus" scoped>
// 底部 开始
.hd-footer
  text-align center
  p
    margin-bottom 0px
    a
      color #586C94
  .footerLinks
    padding-top 2px
// 底部 结束
</style>

